<template>
  <div class="contain">
    <div class="top">
      <div>区域：{{region}}</div>
      <div class="top2">
        <div style="margin-top:2px"><span>时间：</span></div>
        <div class="Time">
          <el-date-picker
            v-model="value1"
            :picker-options="optionsDisable"
            size="mini"
            type="daterange"
            @change="handData"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
    </div>
    <div class="lackele" >
      <div style="line-height:30px">
        <span >电力缺口</span>
        <div class="lackele-left"><el-button @click="gap_system" :disabled="elelack" type="primary" size="small">确定</el-button></div>
      </div>
      <div class="lackele-content">
        <div class="lackele-content1">
          <div class="lackele-content11">时间区域</div>
          <div v-for="item in weekItems" class="lackele-content12">
            {{item}}
          </div>
        </div>
        <div class="lackele-content2">
          <div class="lackele-content21">{{timeDura}}</div>
          <el-input v-model="input[0]" type="number"  placeholder="输入额度"></el-input>
          <el-input v-model="input[1]" type="number"  placeholder="输入额度"></el-input>
          <el-input v-model="input[2]" type="number"  placeholder="输入额度"></el-input>
          <el-input v-model="input[3]" type="number"  placeholder="输入额度"></el-input>
          <el-input v-model="input[4]" type="number"  placeholder="输入额度"></el-input>
          <el-input v-model="input[5]" type="number"  placeholder="输入额度"></el-input>
          <el-input v-model="input[6]" type="number"  placeholder="输入额度"></el-input>
        </div>
      </div>
    </div>
    <div class="lineEle">
      <div class="lineEle-top"><span>本周有序用电候选表</span></div>
      <div class="lineEle-content">
        <div class="lineEle-content-top">
          <span><i class="el-icon-data-line"></i></span><span style="margin-left:10px">企业</span>
          <div class="search">
              <el-input class="elInputSearch" placeholder="输入企业名称/代码" prefix-icon="el-icon-search" 
                  v-model="keywords" @keyup.enter="goSearch()" />
          </div>
        </div>
        <div class="bussDiv">
          <el-table
          :row-key="row => row.id"
          v-loading="listLoading1"
          :data="TableData1"
          fit
          highlight-current-row
          style="width: 100%;"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          >
            <!-- <el-table-column label="停电时间" sortable prop="DuraTime" align="center"></el-table-column> -->
            <el-table-column label="企业名称" prop="BussName" align="center"></el-table-column>
            <!-- 类型 -->
            <el-table-column label="类型" prop="Type" 
            min-width="40px" align="center"
            :filters="[{text: 'A', value: 'A'}, 
            {text: 'B', value: 'B'}, {text: 'C', value: 'C'}, 
            {text: '高能耗', value: '高能耗'}]"
            :filter-method="filterHandler1"></el-table-column>
            <!-- 日基线 -->
            <el-table-column label="日基线" prop="BaseLine" 
            min-width="40px" align="center"
            ></el-table-column>   
            <el-table-column label="占位字段2" sortable prop="placeField2" align="center"></el-table-column>
            
            <!-- <el-table-column label="选中" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.check"
                  @change="handleSelectionChange(scope.row)">
                </el-switch>
              </template>
            </el-table-column> -->
            
            <el-table-column label="操作" align="center" width="220px">
              <template slot-scope="scope">
                <el-input id="el-input-table"
                  size="mini"
                  placeholder="输入额度"
                  type="number"
                  :disabled="elelack||elelack1"
                  v-model="scope.row.inputLimit"
                  @change="handInput(scope.$index, scope.row)">
                </el-input>
                <el-select v-model="scope.row.perLimit"
                filterable placeholder="请选择" 
                id="el-select-table" allow-create 
                :disabled="elelack||elelack1"
                 size="mini" @change="handSelect(scope.$index, scope.row)">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="剩余额度" align="center">
              <span style="color:red">{{amount}}</span>
            </el-table-column>
          </el-table>
          <pagination v-show="total1>0" :total="total1" :page.sync="listQuery1.page" :limit.sync="listQuery1.limit" @pagination="getList1" />
      </div>

    </div>
    </div>
    <div class="preview">
      <div class="preview1">
        <span><i class="el-icon-data-line"></i></span><span style="margin-left:10px">预览</span>
      </div>
      <div class="preview2">
        <div class="preview21">
          <div class="preview2top">
            <span>需选企业数</span>
          </div>
          <div class="preview2bot">
            {{Previews.NeedBuss}}
          </div>
        </div>
        <div class="preview22">
          <div class="preview2top">
            <span>总缺口</span>
          </div>
          <div class="preview2bot">
            {{Previews.AllLack}}
          </div>
        </div>
        <div class="preview23">
          <div class="preview2top">
            <span>企业类型数A/B/高能耗/C/D</span>
          </div>
          <div class="preview2bot">
            <span>{{Previews.VauleA}}/{{Previews.VauleB}}/{{Previews.VauleH}}/{{Previews.VauleC}}/{{Previews.VauleD}}</span>
          </div>
        </div>
        <div class="preview24"><el-button @click="handlesubmit" type="primary" id="submitbu">提交计划</el-button></div>
      </div>
      <!-- 预览的提交后的对话框 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="20%"
        :before-close="handleClose">
        <span>请确认提交任务，提交后不可改变，务必谨慎检查</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 预览的搜索框 -->
      <div class="preview3">
        <div class="search">
          <el-input id="searchInput" placeholder="输入企业名称/代码" prefix-icon="el-icon-search" 
              v-model="keywords" @keyup.enter="goSearch()" />
      </div>
      </div>
      <div class="preview4">
        <div class="table">
          <el-table
          :row-key="row => row.id"
          v-loading="listLoading2"
          :data="TableData2"
          fit
          highlight-current-row
          style="width: 100%;"
          ref="multipleTable"
          >
            <!-- <el-table-column label="停电时间" sortable prop="DuraTime" align="center"></el-table-column> -->
            <el-table-column label="企业名称" prop="BussName" align="center"></el-table-column>
            <!-- 类型 -->
            <el-table-column label="类型" prop="Type" 
            min-width="40px" align="center"
            :filters="[{text: 'A', value: 'A'}, 
            {text: 'B', value: 'B'}, {text: 'C', value: 'C'}, 
            {text: '高能耗', value: '高能耗'}]"
            :filter-method="filterHandler1"></el-table-column>
            <!-- 需认领总额度 -->
            <el-table-column label="需认领总额度" prop="needAdopte" 
            min-width="40px" align="center"
            ></el-table-column>   
            <el-table-column label="操作" align="center" width="220px">
              <template slot-scope="scope1">
                <el-input id="el-input-table"
                  size="mini"
                  placeholder="输入额度"
                  v-model="scope1.row.inputLimit">
                </el-input>
                <el-select v-model="scope1.row.perLimit" placeholder="请选择" 
                id="el-select-table" size="mini" @change="handSelect(scope1.$index, scope1.row)">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="删除" align="center">
              <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </el-table-column>
          </el-table>
          <pagination v-show="total2>0" :total="total2" :page.sync="listQuery2.page" :limit.sync="listQuery2.limit" @pagination="getList2" />
      </div>
    </div>
  </div>
</div>
</template>

<script>
import Pagination from '@/components/Pagination'
import TableData from '@/utils/TableData.js'
export default {
    components: {
      Pagination,
    },
    data() {
      return {
        elelack1:true,
        dialogVisible: false,
        keywords:'',
        Previews:{
          NeedBuss:33,
          AllLack:2000,
          VauleA:1,
          VauleB:1,
          VauleH:11,
          VauleC:1,
          VauleD:19
        },
        checked:true,
        options: [{
          value: '5%',
          label: '5%'
        }, {
          value: '10%',
          label: '10%'
        }, {
          value: '15%',
          label: '15%'
        }],
        selectValue:'',
        tableLine:['',''],
        multipleSelection: [],
        region: "全萧山",
        value1: '',
        elelack:true,
        optionsDisable:{
          onPick({ maxDate, minDate }){
            // console.log(maxDate,minDate)
          }
        },
        maxDate:new Date(),
        minDate:new Date(),
        input:['','','','','','',''],
        switchValue:false,
        OfLine:false,
        TableData1:null,
        listLoading1:false,
        total1: 0,
        listQuery1: {
            page: 1,
            limit: 5,
            importance: undefined,
            title: undefined,
            type: undefined,
            sort: '+id'
        },
        TableData2:null,
        listLoading2:false,
        total2: 0,
        listQuery2: {
            page: 1,
            limit: 5,
            importance: undefined,
            title: undefined,
            type: undefined,
            sort: '+id'
        },
        amount:0, //周一到周日额度的总和
        bussHandle:[]
      }
    },
    created() {
        this.getList1()
        this.getList2()
    },
    methods: {
      //电力缺口的确认框
      gap_system(){
        let amount = 0;
        for(let i = 0;i < this.input.length;i++){
          amount = amount + parseInt(this.input[i]);
        }
        this.amount = amount;
        this.elelack1 = false
        console.log(this.amount)
      },
      // 确认框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 第一个表格的输入处理事件
      handInput(id, row){
        if(row.inputLimit == ''){
          for(let i = 0;i < this.bussHandle.length;i++){
          if(row.id == this.bussHandle[i].id){
            this.bussHandle[i].value = 0
            continue;
            }
          }
          for(let i = 0;i < this.TableData1.length;i++){
          if(this.TableData1[i].id == row.id){
            this.TableData1[i].perLimit = ''
            continue;
            }
          }
          let amount_input = 0;
          for(let i = 0;i < this.input.length;i++){
            amount_input = amount_input + parseInt(this.input[i]);
          }
          for(let i = 0;i < this.bussHandle.length;i++){
            amount_input = amount_input - parseInt(this.bussHandle[i].value)
          }
          this.amount = amount_input
            return
        }
        let flag = false
        for(let i = 0;i < this.bussHandle.length;i++){
          if(row.id == this.bussHandle[i].id){
            this.bussHandle[i].value = row.inputLimit
            flag = true;
            continue;
          }
        }
        if(!flag){
          this.bussHandle.push({id:row.id,value:row.inputLimit});
        }
        for(let i = 0;i < this.TableData1.length;i++){
          if(this.TableData1[i].id == row.id){
            this.TableData1[i].perLimit = (parseInt(row.inputLimit)*100/row.BaseLine).toFixed(0)+'%';
            continue;
          }
        }
        let amount_input = 0;
        for(let i = 0;i < this.input.length;i++){
          amount_input = amount_input + parseInt(this.input[i]);
        }
        for(let i = 0;i < this.bussHandle.length;i++){
          amount_input = amount_input - parseInt(this.bussHandle[i].value)
        }
        this.amount = amount_input
        console.log(this.bussHandle)
      },
      // 第一个表格的选择器
      handSelect(id, row){
        
        if(row.perLimit == ''){
          for(let i = 0;i < this.bussHandle.length;i++){
            if(this.bussHandle[i].id == row.id){
              this.bussHandle[i].value = '';
              continue
            }
          }
          return
        }
        if(row.perLimit[row.perLimit.length-1] != '%'){
          return
        }
        
        let per = parseInt(row.perLimit.split('%'));
        let flag = false
        for(let i = 0;i < this.bussHandle.length;i++){
          if(row.id == this.bussHandle[i].id){
            this.bussHandle[i].value = row.BaseLine * per *0.01
            flag = true;
            continue;
          }
        }
        if(!flag){
          this.bussHandle.push({id:row.id,value:row.BaseLine * per *0.01});
        }
        row.inputLimit = row.BaseLine * per *0.01
        let amount_input = 0;
        for(let i = 0;i < this.input.length;i++){
          amount_input = amount_input + parseInt(this.input[i]);
        }
        for(let i = 0;i < this.bussHandle.length;i++){
          amount_input = amount_input - parseInt(this.bussHandle[i].value)
        }
        this.amount = amount_input
      },
      getList1() {
            
            this.listLoading1 = true
            let TableArray = []
            
            for (let i = (this.listQuery1.page-1)*this.listQuery1.limit;i <this.listQuery1.page * this.listQuery1.limit;i++)
            {
                if(i<TableData.TableData1.length){
                    
                    TableData.TableData1[i].check = false
                    TableArray.push(TableData.TableData1[i]);
                }
            }
            console.log("============")
            let storelineEle = this.$store.getters.lineEleData;
            console.log(storelineEle)
            for(let i = 0;i < TableArray.length;i++)
            {
              for(let j = 0;j < storelineEle.length;j++)
              {
                if(TableArray[i].id == storelineEle[j].id){
                  TableArray[i].check = true;
                  continue;
                }
              }
            }
            this.TableData1 = TableArray;
            for(let i = 0;i < this.bussHandle.length;i ++){
              for(let j = 0;j < this.TableData1;j ++){
                if(this.bussHandle[i].id == this.TableData1[j].id){
                  this.TableData1[j].inputLimit = this.bussHandle[i].value;
                  continue;
                }
              }
            }
            this.listLoading1 = false;
            this.total1 = TableData.TableData1.length;
        },
      // 第二个表格Table的请求方法
      getList2() {
          this.listLoading2 = true
          let TableArray = []
          for (let i = (this.listQuery2.page-1)*this.listQuery2.limit;i <this.listQuery2.page * this.listQuery2.limit;i++)
          {
              if(i<TableData.TableData2.length){
                  TableArray.push(TableData.TableData2[i])
              }
          }
          this.TableData2 = TableArray;
          console.log(this.TableData)
          this.listLoading2 = false;
          this.total2 = TableData.TableData2.length;
      },
      // 对选取时间进行判断是否符合条件
      handData(time){
        if(time[0].getDay() == 4 && (time[1].getTime()-time[0].getTime() == 6*86400000)){
          this.elelack = true
          this.maxDate = time[1]
          this.minDate = time[0]
          this.elelack = false
        }else{
          this.$message.error('请选择周四并且周期为一周');
          this.elelack = true
          this.elelack1 = true
        }
        console.log(this.value1)
      },
      // 预览的提交按钮
      handlesubmit(){
        this.dialogVisible = true
      }
    },
    computed: {
      weekItems:function() {
        let time1 = this.minDate.getTime();
        let WeekDate = [];
        let Week = ["周日","周一","周二","周三","周四","周五","周六"]
        for (let i = 0;i < 7;i++)
        {
          let date = new Date(time1+86400000*i);  
          WeekDate.push(Week[date.getDay()]+"("+date.getDate()+")"+"号")
          console.log(date.getDay())
        }
        return WeekDate
      },
      timeDura:function() {
        let time1 = this.minDate.getFullYear()+"."+(1+this.minDate.getMonth())+"."+this.minDate.getDate();
        let maxDate = new Date(this.minDate.getTime()+86400000*6);
        let time2 = maxDate.getFullYear()+"."+(maxDate.getMonth()+1)+"."+maxDate.getDate()
        return time1+"-"+time2
      }
    },
}
</script>

<style scoped>
.bussDiv{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
/deep/input::-webkit-outer-spin-button,
/deep/input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/#searchInput{
  width: 250px;
}
.search{
  margin-left: 40px;
}
.preview3{
  margin-top: 20px;
  margin-left: 80px;
}
.preview2{
  display: flex;
  margin-top: 20px;
  margin-left: 20px;
}
.preview21{
  width: 170px;
  height: 80px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.preview2top{
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.preview2bot{
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 30px;
  font-weight: 20px;
}
.preview22{
  width: 200px;
  height: 80px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-left: 60px;
}
.preview23{
  width: 250px;
  height: 80px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-left: 60px;
}
.preview24{
  width: 30px;
  height: 80px;
  margin-left: 60px;
}
/deep/#submitbu{
  margin: 30px auto;
}
.preview1{
  margin-top: 10px;
  margin-left: 20px;
}
/deep/#el-input-table::-webkit-input-placeholder{
  font-size: 0.1px; 
}
/deep/#el-select-table{
  float: left;
  width: 100px;
}
/deep/#el-input-table{
  float: left;
  width: 100px;
}
/deep/.table-right{
  color:red;
}
.lineEle-content-top{
  margin-top: 10px;
  margin-left: 20px;
}
.lineEle{
  border: 1px solid #EBEEF5;
  margin-top: 20px;
  margin-left: 20px;
}
.lineEle-top{
  height: 30px;
  line-height: 30px;
  font-weight: 10px;
  background-color: #EBEEF5;
}
.contain{
    padding: 20px;
}
.top{
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EBEEF5;
    font-weight: 10px;
}
.top2{
  margin-top: 10px;
  display: flex;
}
.Time{
    margin-left: 5px;
}
.lackele{
  font-weight: 20px;
  margin-left: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
}
.lackele-left{
  float: right;
}
.lackele-content1{
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  height: 30px;
  width: 100%;
  background-color: #EBEEF5;
  line-height: 30px;
}
.lackele-content2{
  display: flex;
  justify-content: space-around;
  height: 30px;
  width: 100%;
  line-height: 30px;
  margin-top: 5px;
}
.lackele-content11{
  width: 160px;
  text-align: center;
}
.lackele-content12{
  width: 100px;
  text-align: center;
  
}
.lackele-content21{
  width: 170px;
  line-height: 40px;
  text-align: center;
}
/deep/.el-input{
  width: 100px;
}
.search{
  display: inline-block;
  height: 50px;
  margin-left: 200px;
}
/deep/.elInputSearch{
  width: 217.88px;
}
</style>